<template>
  <div class="md-list">
    <div class="lst-hd">
      <div class="lst-manage" v-show="manageButton">
        <span class="manage-ft" @click="manageBt">
          <img src="../images/icon_administration.png" alt=""  />
          <span>账户管理</span>
        </span>
      </div>

      <div class="manage-bt" v-show="manageBtHide">
        <span @click="off">取消</span>
        <span @click="remove">删除</span>
      </div>

      <div class="lst-ct">
        <div class="center" v-for="product in productList"
          v-link="manageBtHide === false?'/particulars/?intelligentNo=' + product.intelligentNo : ''">
          <span class="ct-title">智能卡号：</span>
          <span class="ct-num">{{ product.intelligentNo }}</span>
          <span class="ct-ft" v-show="myHomeShow">{{ product.remarkName }}</span>
          <span class="ct-img" v-show="myImgShow"><img src="../images/icon_go.png" alt="" /></span>
          <span class="ct-img sureImg" v-show="removeSuer" @click="suer($event, product.id)"></span>
        </div>
      </div>

    </div>
    <div class="bg-lst-fd">
      <div class="lst-fd" v-link="'addUsers/'">
        <button type="button"><span>新增缴费</span></button>
      </div>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        manageButton: true,
        manageBtHide: false,
        myHomeShow: true,
        myImgShow: true,
        removeSuer: false,
        removeOff: false,
        productList: [],
        productId: "",
        cardActive: []
      };
    },
    methods: {
      manageBt(e) {
        console.info(e);
        if (this.manageButton === true) {
          this.manageButton = false;
          this.myHomeShow = false;
          this.myImgShow = false;
          this.removeSuer = true;
          this.manageBtHide = true;
        }
      },
      async remove() {
        await AJAX.removeMsg({
          openid: 'openid=' + this.$root.openId,
          id: "id=" + this.cardActive
        });
        let inquireMsg = await AJAX.inquireMsg(this.$root.openId);
        this.productList = [];
        inquireMsg.forEach(pro => {
          this.productList.push({
            accountName: pro.accountName,
            accountNo: pro.accountNo,
            createTime: pro.createTime,
            updateTime: pro.updateTime,
            intelligentNo: pro.intelligentNo,
            remarkName: pro.remarkName,
            type: pro.type,
            userId: pro.userId,
            isActive: pro.isActive
          });
        });
        this.manageBtHide = false;
        this.manageButton = true;
      },
      off() {
        if (this.manageBtHide === true) {
          this.manageButton = true;
          this.myHomeShow = true;
          this.myImgShow = true;
          this.removeOff = false;
          this.removeSuer = false;
          this.manageBtHide = false;
        }
      },
      suer(e, card) {
        let $event = e.target;
        if ($event.classList.contains('active')) {
          $event.classList.remove('active');
          this.removeArr(this.cardActive, card);
        } else {
          $event.classList.add('active');
          this.cardActive.push(card);
        }
      },
      indexArr (arr, val) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] === val) return i;
        }
        return -1;
      },
      removeArr (arr, val) {
        let index = this.indexArr(arr, val);
        if (index > -1) {
          arr.splice(index, 1);
        }
      }
    },
    async ready() {
      let inquireMsg = await AJAX.inquireMsg(this.$root.openId);
      this.productList = inquireMsg;
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .md-list{
    position: absolute;
    width:100%;
    height: 100%;
    color:#404040;
    font-size: .8rem;
    background-color: #EBEBEB;
    .lst-hd{
      background-color: #fff;
      margin-bottom: 5rem;
      .lst-manage{
        border-bottom: 1px solid #E6E6E6;
        position: relative;
        height:2rem;
        text-align: right;
        padding: .3rem .5rem .3rem 0;
        color:#15A1D6;
        .manage-ft{
          position: absolute;
          right:0;
          margin-right: .3rem;
          img{
            vertical-align:middle;
            width:.8rem;
            height:.8rem;
          }
        }
      }
      .manage-bt{
        border-bottom: 1px solid #E6E6E6;
        padding: .3rem 0;
        span{
          width:48%;
          padding:.2rem 0;
          display: inline-block;
          text-align: center;
          color:#15A1D6;
        }
        span:last-of-type{
          border-left: 1px solid #E6E6E6;
        }
      }

      .lst-ct{
        margin-bottom: 3rem;
        .center{
          padding:.6rem .5rem;
          border-bottom: 1px solid #E6E6E6;
          position: relative;
          .ct-ft{
            position: absolute;
            right:1.3rem;
            width:3.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align:center;
            color:#CCC;
          }
          .ct-img{
            position: absolute;
            right:0;
            top:.73rem;
            margin-right: .3rem;
            width:1rem;
            height:1rem;
            img{
              width:100%;
              height:auto;
            }
          }
        }
      }
    }

    .bg-lst-fd{
      position: fixed;
      bottom: 0;
      width:100%;
      height:3rem;
      background-color: #fff;
      .lst-fd button{
        position: fixed;
        bottom: 0;
        padding: .5rem 0;
        width:90%;
        margin-left:5%;
        margin-bottom: .5rem;
        border-radius: .3rem;
        background-color: #15A1D6;
        text-align: center;
        color:#fff;
      }
    }

    .sureImg{
      background-image: url(../images/icon_yes.png);
      background-size: 100% auto;
      &.active{
        background-image: url(../images/icon_yes_active.png);
      }
    }
  }
</style>
